<template>
  <el-dialog :title="readOnly?'具体点位':'精准选点'" :visible.sync="show" width="80%" center append-to-body
             :before-close="close"
  >
    <div v-if="!readOnly" class="tip_box flex flex-no-wrap" style="justify-content: space-between;">
      <div>
        <span>共计<span class="text-green text-bold">{{ pointDataList.length }}</span>个空闲,</span>
        <span>最多可选<span class="text-red text-bold">{{ allCanSelectCount }}</span>个,</span>
        <span>已选中<span class="text-blue text-bold">{{ selectPointIds.length }}</span>个</span>
        <span v-if="isCombo">必须选择<span class="text-red">{{ needSelectCount }}</span>个</span>
        <el-checkbox v-model="isAllSelect"
                     label="全选"
                     style="margin-left: 5px"
                     @change="(val)=>{allSelect(val)}"
        />
        <div v-if="mediaTypeId == 1" class="quick_selection_box">
          <div class="flex flex-no-wrap justify-start align-center">
            <span style="margin-right: 10px">楼层：</span>
            <el-checkbox-group v-model="dialogQuickSelection.floorList"
            >
              <el-checkbox v-for="item in floorList" :key="item" :label="item" @change="(val)=>{quickSelect(val,item)}">
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div v-if="mediaTypeId==9" class="quick_selection_box">
          <div class="flex flex-no-wrap justify-start align-center">
            <span style="margin-right: 10px">AB面：</span>
            <el-checkbox-group v-model="dialogQuickSelection.surfaceList"

            >
              <el-checkbox :label="57" @change="(val)=>{quickSelect(val,57)}">A面</el-checkbox>
              <el-checkbox :label="58" @change="(val)=>{quickSelect(val,58)}">B面</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div v-if="ruleArr.length>0" class="flex">
        <div v-for="rule in ruleArr">
          <el-tag v-if="rule.id == 1 && mediaTypeId == 1" size="mini" type="danger">每单元限{{ rule.num }}个</el-tag>
          <el-tag v-if="rule.id == 2 && mediaTypeId == 1" size="mini" type="danger">每层限{{ rule.num }}个</el-tag>
          <el-tag v-if="rule.id == 3 && mediaTypeId == 9" size="mini" type="danger">每市场限{{ rule.num }}个</el-tag>
          <el-tag v-if="rule.id == 4 && mediaTypeId == 9" size="mini" type="danger">AB面同时选中</el-tag>
        </div>
      </div>
    </div>
    <el-divider v-if="!readOnly"/>
    <div>
      <!--电梯智能框-->
      <div v-if="mediaTypeId == 1" class="flex flex-wrap align-center justify-start">
        <div v-for="building in pointDataArr" :key="building.building_number">
          <div class="building_box flex flex-wrap align-center justify-start">
            <div v-for="unit in building.unit_arr" :key="unit.unit_number">
              <div class="unit_box">
                <div v-for="(floor,index) in unit.floor_arr" :key="floor.floor_number"
                     class="flex flex-wrap align-center justify-start floor_box"
                     :class="index == unit.floor_arr.length-1?'no_split_line':''"
                >
                  <div class="floor_text">{{ floor.floor_name }}</div>
                  <!--                  <div v-for="point in floor.point_arr" :key="point.id" class="point_box"-->
                  <!--                       :class="point.checked?'choose_point_box':''" @click="itemChange(point,unit,floor)"-->
                  <!--                  >{{ point.code }}-->
                  <!--                  </div>-->
                  <div v-for="point in floor.point_arr">
                    <div v-if="isReplace">
                      <el-popover :key="point.id" placement="top" width="100"
                                  trigger="hover"
                                  :open-delay="300"
                      >
                        <div style="text-align: center; margin: 0">
                          <el-button type="primary" size="mini" @click="showDrawer(point)">换位</el-button>
                        </div>
                        <div slot="reference" class="point_box"
                             :class="point.checked?'choose_point_box':''"
                             @click="itemChange(point,unit,floor)"
                        >
                          {{ point.code }}
                        </div>
                      </el-popover>
                    </div>
                    <div v-if="!isReplace" class="point_box"
                         :class="point.checked?'choose_point_box':''"
                         @click="itemChange(point,unit,floor)"
                    >
                      {{ point.code }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="unit_text">{{ unit.unit_name }}</div>
            </div>
          </div>
          <div class="building_text">{{ building.building_name }}</div>
        </div>
      </div>
      <!--综合市场-->
      <div v-if="mediaTypeId == 9" class="flex flex-wrap align-center justify-start">
        <div v-for="(ab_arr,index) in pointDataArr" :key="index"
             class="AB_box flex flex-wrap align-center justify-start"
        >
          <!--          <div v-for="point in ab_arr.point_arr">-->
          <!--            <div class="point_box" :class="point.checked?'choose_point_box':''"-->
          <!--                 @click="itemChange(point,null,null)"-->
          <!--            >-->
          <!--              {{ point.code }}-->
          <!--            </div>-->
          <!--            <div :class="point.ab_type_id == 57?'AB_name_A':'AB_name_B'" style="text-align: center">-->
          <!--              {{ point.ab_type_id == 57 ? 'A面' : 'B面' }}-->
          <!--            </div>-->
          <!--          </div>-->
          <div v-for="point in ab_arr.point_arr">
            <div v-if="isReplace">
              <el-popover :key="point.id" placement="top" width="100"
                          trigger="hover"
                          :open-delay="300"
              >
                <div style="text-align: center; margin: 0">
                  <el-button type="primary" size="mini" @click="showDrawer(point)">换位</el-button>
                </div>
                <div slot="reference" class="point_box"
                     :class="point.checked?'choose_point_box':''"
                     @click="itemChange(point,null,null)"
                >
                  {{ point.code }}
                </div>
              </el-popover>
            </div>
            <div v-if="!isReplace" class="point_box"
                 :class="point.checked?'choose_point_box':''"
                 @click="itemChange(point,null,null)"
            >
              {{ point.code }}
            </div>
          </div>
        </div>
      </div>
      <!--其他-->
      <div v-if="mediaTypeId !=1 && mediaTypeId != 9" class="flex flex-wrap align-center justify-start">
        <div v-for="point in pointDataArr">
          <div v-if="isReplace">
            <el-popover :key="point.id" placement="top" width="100"
                        trigger="hover"
                        :open-delay="300"
            >
              <div style="text-align: center; margin: 0">
                <el-button type="primary" size="mini" @click="showDrawer(point)">换位</el-button>
              </div>
              <div slot="reference" class="point_box"
                   :class="point.checked?'choose_point_box':''"
                   @click="itemChange(point,null,null)"
              >
                {{ point.code }}
              </div>
            </el-popover>
          </div>
          <div v-if="!isReplace && hasSpecId">
            <el-popover :key="point.id" placement="top" width="100" trigger="hover" :open-delay="100"
            >
              <div style="text-align: center; margin: 0">
                <el-button type="primary" size="mini" @click="showSpecDialog(point)">选规格</el-button>
              </div>
              <div slot="reference" class="point_box"
                   :class="point.checked?'choose_point_box':''"
                   @click="itemChange(point,null,null)"
              >
                {{ point.code }}
              </div>
            </el-popover>
          </div>
          <div v-if="!isReplace && !hasSpecId" class="point_box"
               :class="point.checked?'choose_point_box':''"
               @click="itemChange(point,null,null)"
          >
            {{ point.code }}
          </div>
        </div>
      </div>
    </div>
    <el-drawer
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
      append-to-body
      size="50%"
    >
      <template slot="title">
        <div style="text-align: center;color: black">{{ dateRange[0] + ' 至 ' + dateRange[1] + ' ' }}中可更换的点位</div>
      </template>
      <div class="drawer_content">
        <div style="text-align: center;margin-bottom: 20px">{{ '预替换的点位' + (selectPoint || {}).code }}</div>
        <div class="search_box">
          <el-form ref="searchForm" :model="searchForm" :inline="true" size="mini">
            <search-form-box :show-more-btn="false">
              <template slot="showSearch">
                <el-form-item label="行政区划" prop="adcode">
                  <el-select v-model="searchForm.adcode" placeholder="请选择行政区划" clearable>
                    <el-option v-for="area in area_arr" :key="area.value" :value="area.value"
                               :label="area.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="项目" prop="building_id">
                  <el-select v-model="searchForm.building_id" placeholder="请选择项目" clearable filterable>
                    <el-option v-for="building in building_arr" :value="building.id" :key="building.id"
                               :label="building.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="编号" prop="code">
                  <el-input v-model="searchForm.code" placeholder="请输入编号" clearable></el-input>
                </el-form-item>
              </template>
              <template slot="searchBtn">
                <el-button type="primary" size="mini" plain @click="search">查询</el-button>
                <el-button type="info" size="mini" plain @click="resetForm">重置</el-button>
              </template>
            </search-form-box>
          </el-form>
        </div>
        <el-table v-loading="exchangeable_point_table_loading" :data="exchangeable_point_list" stripe border
                  size="mini" max-height="680"
        >
          <el-table-column label="序号" width="80" align="center">
            <template slot-scope="scope">
              <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所在区" prop="area" width="80" align="center"></el-table-column>
          <el-table-column label="项目" prop="building_area_name" width="200" align="center" show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="编号" prop="code" width="100" align="center"></el-table-column>
          <el-table-column label="详情" prop="detail" min-width="200" align="center"></el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="replacePoint(scope.row)">替换</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchForm.page"
          :page-sizes="[10,20,50,100, 200, 400]"
          :page-size.sync="searchForm.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="exchangeable_point_total"
        >
        </el-pagination>
      </div>
    </el-drawer>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="close">关 闭</el-button>
      <el-button type="primary" size="mini" @click="save">保 存</el-button>
    </span>
    <el-dialog :title="'点位编号:'+(tmpPoint||{}).code" :visible.sync="centerDialogVisible" width="20%" append-to-body
               center
               @close="closeSpecDialog"
    >
      <div v-loading="specSelectLoading" style="text-align: center">
        规格：
        <el-select size="mini" v-model="media_spec_price_id" placeholder="请选择规格类型">
          <el-option v-for="item in tmpSpecPriceArr" :label="item.media_type_spec_name" :key="item.id" :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="updatePoint">保 存</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox'
import { area_list, list_all } from '@/api/building/building'
import { getUnlockedPoint } from '@/api/workOrder/workOrder'
import { allList } from '@/api/system/media_type_spec_price'

export default {
  name: 'PrecisePointSelection',
  components: {
    SearchFormBox
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    pointData: {
      type: Array,
      default() {
        return []
      }
    },
    mediaTypeId: {
      type: Number,
      default: 0
    },
    isCombo: {
      type: Boolean,
      default: false
    },
    needSelectCount: {
      type: Number,
      default: 0
    },
    allCanSelectCount: {
      type: Number,
      default: 0
    },
    isReplace: {
      type: Boolean,
      default: false
    },
    hasSpecId: {
      type: Boolean,
      default: false
    },
    /**
     * rule_arr:[
     *    id:1, // id 标识约束的类型 1:电梯智能框的单元约束 2：电梯智能框的楼层约束 3：综合市场的项目约束 4:AB面同时选择
     *    num:1
     * ]
     */
    ruleArr: {
      type: Array,
      default() {
        return []
      }
    },
    dateRange: {
      type: Array,
      default() {
        return ['', '']
      }
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    isInit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      pointDataList: [], // pointDataArr副本 点位内存和 pointDataArr中的点位内存一致
      pointDataArr: [],
      floorList: [],
      dialogQuickSelection: {
        floorList: [],
        surfaceList: []
      },
      isAllSelect: false,
      drawer: false,
      exchangeable_point_list: [],
      exchangeable_point_total: 0,
      exchangeable_point_table_loading: false,
      searchForm: {
        page: 1,
        page_size: 10,
        code: null,
        building_id: null,
        adcode: null
      },
      listParams: {
        page: 1,
        page_size: 10,
        code: null,
        building_id: null,
        adcode: null
      },
      building_arr: [],
      area_arr: [],
      selectPoint: null,
      tmpSpecPriceArr: [],
      specSelectLoading: false,
      centerDialogVisible: false,
      tmpPoint: null,
      media_spec_price_id: null,
      current: 1
    }
  },
  computed: {
    selectPointIds() {
      return this.pointDataList.filter(point => point.checked == true).map(point => {
        return point.id
      })
    }
  },
  created() {
    if (this.isInit) {
      this.initBuildingArr()
      this.initAreaArr()
    }
  },
  watch: {
    pointData: {
      handler(val) {
        this.pointDataList = val.map(item => {
          if (item.checked === undefined) {
            this.$set(item, 'checked', false)
          }
          return Object.assign({}, item)
        })
        this.handlerPointData()
      },
      deep: true
    },
    pointDataArr: {
      handler(val) {
        // 全选监听
        if (this.selectPointIds.length === this.pointDataList.length) {
          this.isAllSelect = true
        } else {
          this.isAllSelect = false
        }
        if (this.mediaTypeId == 1) {
          // 楼层监听
          let floor_map = new Map()
          this.pointDataList.forEach(point => {
            if (floor_map.has(point.floor)) {
              let obj = floor_map.get(point.floor)
              obj.total_num += 1
              if (point.checked) {
                obj.select_num += 1
              }
              floor_map.set(point.floor, obj)
            } else {
              let obj = {
                total_num: 1
              }
              obj.select_num = point.checked ? 1 : 0
              floor_map.set(point.floor, obj)
            }
          })
          const that = this
          this.dialogQuickSelection.floorList = []
          floor_map.forEach(function(value, key) {
            if (value.total_num === value.select_num) {
              that.dialogQuickSelection.floorList.push(key)
            }
          })
        } else if (this.mediaTypeId == 9) {
          // AB面监听
          let ab_map = new Map()
          this.pointDataList.forEach(point => {
            if (ab_map.has(point.ab_type_id)) {
              let obj = ab_map.get(point.ab_type_id)
              obj.total_num += 1
              if (point.checked) {
                obj.select_num += 1
              }
              ab_map.set(point.floor, obj)
            } else {
              let obj = {
                total_num: 1
              }
              obj.select_num = point.checked ? 1 : 0
              ab_map.set(point.ab_type_id, obj)
            }
          })
          const that = this
          this.dialogQuickSelection.surfaceList = []
          ab_map.forEach(function(value, key) {
            if (value.total_num === value.select_num) {
              that.dialogQuickSelection.surfaceList.push(key)
            }
          })
        }
      },
      deep: true
    }
  },
  methods: {
    close() {
      this.isAllSelect = false
      this.dialogQuickSelection.surfaceList = []
      this.dialogQuickSelection.floorList = []
      this.$emit('close')
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.exchangeable_point_list = []
          this.exchangeable_point_total = 0
          this.searchForm = {
            page: 1,
            page_size: 10,
            code: null,
            building_id: null,
            adcode: null
          }
          this.listParams = {
            page: 1,
            page_size: 10,
            code: null,
            building_id: null,
            adcode: null
          }
          done()
        })
        .catch(_ => {
        })
    },
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getUnlockedPointList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getUnlockedPointList()
    },
    initBuildingArr() {
      list_all().then(res => {
        this.building_arr = res.data
      })
    },
    initAreaArr() {
      area_list({ pid: 320400 }).then(res => {
        this.area_arr = res.data
      })
    },
    handlerPointData() {
      this.floorList = []
      if (this.mediaTypeId == 1) { // 电梯智能框
        this.pointDataArr = []
        this.pointDataList.forEach(point => {
          if (this.floorList.find(floor_number => floor_number == point.floor) === undefined) {
            this.floorList.push(point.floor)
          }
          const find = this.pointDataArr.find(building => building.building_number == point.building_number)
          if (find !== undefined) {
            let unit = find.unit_arr.find(unit => unit.unit_number == point.unit_number)
            if (unit !== undefined) {
              let floor = unit.floor_arr.find(floor => floor.floor_number == point.floor)
              if (floor !== undefined) {
                floor.point_arr.push(point)
              } else {
                floor = {
                  floor_number: point.floor,
                  floor_name: point.floor + 'F',
                  point_arr: []
                }
                floor.point_arr.push(point)
                unit.floor_arr.push(floor)
              }
            } else {
              unit = {
                unit_number: point.unit_number,
                unit_name: point.unit_number + '单元',
                floor_arr: []
              }
              const floor = {
                floor_number: point.floor,
                floor_name: point.floor + 'F',
                point_arr: []
              }
              floor.point_arr.push(point)
              unit.floor_arr.push(floor)
              find.unit_arr.push(unit)
            }
          } else {
            const building = {
              building_number: point.building_number,
              building_name: point.building_number + '号楼',
              unit_arr: []
            }
            const unit = {
              unit_number: point.unit_number,
              unit_name: point.unit_number + '单元',
              floor_arr: []
            }
            const floor = {
              floor_number: point.floor,
              floor_name: point.floor + 'F',
              point_arr: []
            }
            floor.point_arr.push(point)
            unit.floor_arr.push(floor)
            building.unit_arr.push(unit)
            this.pointDataArr.push(building)
          }
        })
        this.orderPointData()
      } else if (this.mediaTypeId == 9) {
        let tmp = []
        this.pointDataArr = []
        this.pointDataList.forEach(point => {
            if (tmp.find(id => id == point.id) === undefined) {
              let ab_arr = { point_arr: [] }
              ab_arr.point_arr.push(point)
              tmp.push(point.id)
              if (point.pair_media_id != null && tmp.find(id => id == point.pair_media_id) === undefined) {
                let find = this.pointDataList.find(b => b.id == point.pair_media_id)
                if (find) {
                  ab_arr.point_arr.push(find)
                  tmp.push(find.id)
                }
              }
              this.pointDataArr.push(ab_arr)
            }
          }
        )
      } else {
        this.pointDataArr = this.pointDataList
      }
    },
    itemChange(item, unit, floor, type = true) {
      if (this.isReplace) {
        // 是否更换
        console.log(1)
      } else {
        if (!this.readOnly) {
          const flag = true
          if (this.isCombo) {
            if (this.selectPointIds.length == this.allCanSelectCount && !item.checked) {
              this.$message.error('套餐类型不可增加点位')
              return
            }
          }
          if (this.mediaTypeId == 9 && !item.checked) {
            const market_rule = this.ruleArr.find(rule => rule.id == 3)
            if (market_rule !== undefined) {
              const select_num = this.pointDataList.filter(point => point.checked == true).length
              if (select_num >= market_rule.num) {
                if (type) {
                  this.$message.error('一综合市场最多选择' + market_rule.num + '个')
                }
                return
              }
            }
          } else if (this.mediaTypeId == 1 && !item.checked) {
            const unit_rule = this.ruleArr.find(rule => rule.id == 1)
            if (unit_rule !== undefined) { // 开启了单元过滤
              let count = 0
              unit.floor_arr.forEach(floor_item => {
                floor_item.point_arr.forEach(point => {
                  if (point.checked) {
                    count++
                  }
                })
              })
              if (count >= unit_rule.num) {
                if (type) {
                  this.$message.error('一单元最多选择' + unit_rule.num + '个')
                }
                return
              }
            }
            const floor_rule = this.ruleArr.find(rule => rule.id == 2)
            if (floor_rule !== undefined) { // 开启了楼层过滤
              let count = 0
              floor.point_arr.forEach(point => {
                if (point.checked) {
                  count++
                }
              })
              if (count >= 1) {
                if (type) {
                  this.$message.error('一层最多选择' + floor_rule.num + '个')
                }
                return
              }
            }
          }
          if (flag) {
            item.checked = !item.checked
            const find = this.ruleArr.find(rule => rule.id == 4)
            if (find !== undefined) {
              const media = this.pointDataList.find(point => point.id == item.pair_media_id)
              if (media !== undefined && item.checked != media.checked) {
                this.itemChange(media, null, null, false)
              }
            }
          }
        }
      }
    },
    orderPointData() {
      if (this.mediaTypeId == 1) {
        this.pointDataArr.sort((i1, i2) => {
          return parseInt(i1.building_number) - parseInt(i2.building_number)
        })
        this.pointDataArr.forEach(building => {
          building.unit_arr.sort((n1, n2) => {
            return n1.unit_number - n2.unit_number
          })
          building.unit_arr.forEach(unit => {
            unit.floor_arr.sort((i1, i2) => {
              return parseInt(i1.floor_number) - parseInt(i2.floor_number)
            })
          })
        })
      }
    },
    allSelect(val) {
      if (this.mediaTypeId == 1) {
        this.pointDataArr.forEach(building => {
          building.unit_arr.forEach(unit => {
            unit.floor_arr.forEach(floor => {
              floor.point_arr.forEach(point => {
                if (!point.checked === val) {
                  this.itemChange(point, unit, floor, false)
                }
              })
            })
          })
        })
      } else if (this.mediaTypeId == 9) {
        this.pointDataArr.forEach(ab => {
          ab.point_arr.forEach(point => {
            if (!point.checked === val) {
              this.itemChange(point, null, null, false)
            }
          })
        })
      } else {
        this.pointDataList.forEach(point => {
          point.checked = val
        })
      }
    },
    /**
     * 快速选中
     * @param val checkBox是否被选中
     * @param quick_item 可能是楼层 也可能是AB面
     */
    quickSelect(val, quick_item) {
      if (this.mediaTypeId == 1) {
        this.pointDataArr.forEach(building => {
          building.unit_arr.forEach(unit => {
            unit.floor_arr.forEach(floor => {
              if (quick_item == floor.floor_number) {
                if (val) {
                  floor.point_arr.forEach(point => {
                    if (!point.checked) {
                      this.itemChange(point, unit, floor, false)
                    }
                  })
                } else {
                  floor.point_arr.forEach(point => {
                    if (point.checked) {
                      this.itemChange(point, unit, floor, false)
                    }
                  })
                }
              }
            })
          })
        })
      } else if (this.mediaTypeId == 9) {
        this.pointDataArr.forEach(ab => {
          ab.point_arr.forEach(point => {
            if (val) {
              if (!point.checked && point.ab_type_id == quick_item) {
                this.itemChange(point, null, null, false)
              }
            } else {
              if (point.checked && point.ab_type_id == quick_item) {
                this.itemChange(point, null, null, false)
              }
            }
          })
        })
      }
    },
    save() {
      console.log(this.pointDataList)
      if (this.isCombo) {
        if (this.selectPointIds.length != this.needSelectCount) {
          this.$message.error('必须选中' + this.needSelectCount + '个点位')
          return
        } else {
          this.$emit('save', this.selectPointIds, this.pointDataList)
        }
      } else {
        this.$emit('save', this.selectPointIds, this.pointDataList)
      }
      this.close()
    },
    replacePoint(row) {
      this.$confirm('确定将code为' + this.selectPoint.code + '的点位替换成code为' + row.code + '的点位', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let target = Object.assign({ checked: true }, row)
        this.$emit('replace', this.selectPoint, target, this)
      }).catch(() => {

      })
    },
    showDrawer(point) {
      if (this.isCombo) {
        return
      }
      this.selectPoint = point
      this.drawer = true
      this.getUnlockedPointList()
    },
    search() {
      this.searchForm.page = 1
      this.listParams = Object.assign({}, this.searchForm)
      this.getUnlockedPointList()
    },
    /**
     * 获取空闲点位列表
     */
    getUnlockedPointList() {
      const params = Object.assign(
        {
          point_type_id: this.mediaTypeId,
          start_time: this.dateRange[0] + ' 00:00:00',
          end_time: this.dateRange[1] + ' 00:00:00'
        }, this.listParams)
      this.exchangeable_point_table_loading = true
      getUnlockedPoint(params).then(res => {
        this.exchangeable_point_list = res.data.records
        this.exchangeable_point_total = res.data.total
        this.exchangeable_point_table_loading = false
      })
    },
    resetForm() {
      this.searchForm = {
        page: 1,
        page_size: 10,
        code: null,
        building_id: null,
        adcode: null
      }
      this.listParams = Object.assign({}, this.searchForm)
      this.getUnlockedPointList()
    },
    showSpecDialog(point) {
      this.specSelectLoading = true
      this.centerDialogVisible = true
      this.tmpPoint = point
      this.media_spec_price_id = this.tmpPoint.media_type_spec_price_id
      allList({ media_type_spec_id: this.tmpPoint.media_type_spec_id }).then(res => {
        this.tmpSpecPriceArr = res.data
        this.specSelectLoading = false
      })
    },
    closeSpecDialog() {
      this.media_spec_price_id = null
      this.tmpPoint = null
      this.tmpSpecPriceArr = []
    },
    updatePoint() {
      this.tmpPoint.media_type_spec_price_id = this.media_spec_price_id
      this.centerDialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.quick_selection_box {
  margin-left: 10px;
  display: inline-block;
}

.point_box {
  color: black;
  box-shadow: 0 0 2px 1px #ddd;
  min-width: 60px;
  height: 25px;
  padding: 3px 5px;
  margin: 5px;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
}

.choose_point_box {
  background-image: linear-gradient(45deg, #cf0003, #ffb7c2) !important;
  -webkit-box-shadow: 1px 1px 2px 1px #fadbd9 !important;
  box-shadow: 1px 1px 2px 1px #fadbd9 !important;
  color: white !important;
}

.floor_text {
  width: 70px;
  height: 40px;
  line-height: 40px;
  color: #f37b1d;
  text-shadow: 1px 1px 2px #e1ccbb;
  font-size: 20px;
}

.floor_box {
  border-bottom: 1px #f37b1d dashed;
}

.unit_box {
  border: 1px solid #d7f0db;
  -webkit-box-shadow: 1px 1px 2px 1px #d7f0db;
  box-shadow: 1px 1px 2px 1px #d7f0db;
  min-height: 30px;
  min-width: 60px;
  border-radius: 15px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.unit_text {
  text-align: center;
  color: #39b54a;
  text-shadow: 1px 1px 2px #cfe6d2;
  font-size: 16px;
  font-weight: bold;
  min-height: 22px;
  margin: 10px 5px;
  padding: 4px 5px;
  border-radius: 4px;
  border-width: 1px;
  border-color: #ddd;
}

.building_box {
  border-color: #cce6ff;
  -webkit-box-shadow: 1px 1px 2px 1px #cce6ff;
  box-shadow: 1px 1px 2px 1px #cce6ff;
  min-height: 30px;
  min-width: 60px;
  border-width: 1px;
  border-radius: 15px;
  border-style: solid;
  margin: 10px;
}

.building_text {
  min-height: 22px;
  margin: 10px 5px;
  padding: 4px 5px;
  border-radius: 4px;
  border-width: 1px;
  border-color: #ddd;
  font-weight: bold;
  color: #0081ff;
  text-shadow: 1px 1px 2px #bdd6ec;
  font-size: 18px;
  text-align: center;
}

.no_split_line {
  border-bottom: none !important;
}

.AB_box {
  border-color: #cce6ff;
  -webkit-box-shadow: 1px 1px 2px 1px #cce6ff;
  box-shadow: 1px 1px 2px 1px #cce6ff;
  min-height: 30px;
  min-width: 60px;
  border-width: 1px;
  border-radius: 15px;
  border-style: solid;
  margin: 10px;
  padding: 5px;
}

.AB_name_A {
  font-size: 16px;
  color: #67C23A;
}

.AB_name_B {
  font-size: 16px;
  color: #E6A23C;
}

.el-tag {
  margin-left: 5px;
  margin-right: 5px;
}

/deep/ .el-pagination {
  margin-top: 20px !important;
}

.drawer_content {
  padding: 0 20px;
}
</style>
